{"version": "2.0","name": "Feature Documentation","subline": "Epsilon HTML5 & CSS3 Framework","username": "Enabled","created": "","website": "http://www.enableds.com","update": "02/08/2015","update_today": true,"email": "ienabled@me.com","description": "Epsilon is not a framework that requires you to learn any new language. Epsilon will work with any framework on the market, be it Boostrap or Skeleton. Also, Epsilon is PhoneGap ready! \n\nIf you plan on using our templates for any appstore, regardless if you want to sell the app or put it up for free, you must purchase 2 extended licenses. Not doing so will result in a DMCA. \n\n","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "Structuring Elements","id": "structuring_elements","content": "<h4>\n\tContent Class</h4>\n<p>\tThe content class is the body of all our elements. This will house containers and columns. This class creates a left, right, and bottom margin and changes it&#39;s width on different devices to keep it responsive and beautiful.</p>\n<h4>\n\tContainer Class</h4>\n<p>\tThe container class is the hosing wrapper of a specific feature, this class makes the code more easily readable and at the same time adds a margin bottom to your elements. Inside the container classes the features explained bellow will be added.&nbsp;</p>\n<h4>\n\tControl Classes</h4>\n<p>\tControl classes are added to specific classes to give them a second set of properties.&nbsp;</p>\n<p>\t<b>left-text:</b> will make text align to the left</p>\n<p>\t<b>center-text:&nbsp;</b>will make text align to the center</p>\n<p>\t<strong>right-text:</strong> will make text align to the right</p>\n<p>\t<strong>no-bottom:</strong> this class can be added to any element to remove the margin bottom completely. This can be used for example if you have a paragraph inside a container</p>\n<p>\t<strong>half-bottom:</strong> this can be added to any element of the page, and it will use half the bottom of the main container class.&nbsp;</p>\n<p>\t<strong>full-bottom:</strong> this can be added to any element that you wish to have a full bottom. The bottom value is determined by the container class.&nbsp;</p>\n<p>\t<strong>responsive-image:</strong> when having an image on screen you wish to be fullly responsive and maintain aspect ratio, add the class responsive-image to it and it will automatically scale accordingly when changing resolutions.&nbsp;</p>\n<p>\t<strong>disabled:&nbsp;</strong>adding this class to any element will turn that element off, by setting it&#39;s css to display none.&nbsp;</p>\n<p>\t<b>uppercase:&nbsp;</b>adding this class will make your entire text uppercase</p>\n<p>\t<strong>lowercase:&nbsp;</strong>adding this class will make your entire text lowercase</p>\n<p>\t<b>regular-anchor</b>: if you don&#39;t want a link to change it&#39;s color, adding regular-anchor to it will make it take the color of it&#39;s parrent element.&nbsp;</p>\n<p>\t<strong>hide-if-responsive:</strong> this class can be added to any element you wish to hide on tablets but show on mobiles</p>\n<p>\t<strong>hide-if-mobile:&nbsp;</strong>this class can be added to any element you wish to hide on mobiles but show on tablets.</p>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Classes</h4>\n<p>\tResponsive classes are columns and responsive columns that adapt according to resolutions. We&#39;ve set the breaking point at 768px, which is the default small size of a tablet. Under 768px you risk hitting devices like Phablets and Large Phones and making them switch to tablet resolution.</p>\n<p>\t<strong>Two Columns, Unresponsive Class.&nbsp;</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-half to make sure the margins are perfect.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-half&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Three Columns, Unresponsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-third to make sure the margins are perfect.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-third&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Two Columns, Responsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-half-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half-responsive last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Three Columns, Responsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-third-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half-responsive last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<h4>\n\tSidebar Columns&nbsp;</h4>\n<p>\tSidebar columns are basically a column that&#39;s 25% the width of the screen and a column that&#39;s 75% the width of the screen. Sidebar columns will appear as one row on mobiles and as two columns on tablets.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;sidebar-right-big&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;sidebar-left-small&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;sidebar-left-big&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;sidebar-right-small&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Responsive Classes","id": "responsive_classes","content": "<h4>\n\tResponsive Images</h4>\n<p>\tTo create a responsive image, follow the structure bellow</p>\n<pre class=\"html\">\n&lt;img src=&quot;images/img.jpg&quot; alt=&quot;img&quot; class=&quot;responsive-image&quot;&gt;</pre>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Videos</h4>\n<p>\tTo create a responsive video, follow the structure bellow&nbsp;</p>\n<pre class=\"html\">\n<span class=\"webkit-html-tag\" style=\"font-family: monospace; font-size: medium; white-space: pre-wrap;\">&lt;iframe <span class=\"webkit-html-attribute-name\">class</span>=&quot;<span class=\"webkit-html-attribute-value\">responsive-video</span>&quot; <span class=\"webkit-html-attribute-name\">src</span>=&quot;video_address_link&quot;&gt;</span><span class=\"webkit-html-tag\" style=\"font-family: monospace; font-size: medium; white-space: pre-wrap;\">&lt;/iframe&gt;</span></pre>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Maps</h4>\n<p>\tTo create a responsive map, go to google maps, get the embed code, and paste it in the iframe example bellow!&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;maps-container&quot;&gt;\n    &lt;iframe class=&quot;responsive-image maps&quot; src=&quot;https://maps.google.com/?ie=UTF8&amp;amp;ll=47.595131,-122.330414&amp;amp;spn=0.006186,0.016512&amp;amp;t=h&amp;amp;z=17&amp;amp;output=embed&quot;&gt;&lt;/iframe&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n"},{"title": "Typography Features","id": "typography_features","content": "<h4>\n\tText Highlights</h4>\n<p>\tText highlights will make a certain part of the text show up using a background. These are easy to use and are applied by adding a span class to the text you want highlighted. Please check the examples bellow. The span has the main class text-highlight that sets the proper spacings and the highlight-COLOR class that changes the color. Examples of colors can be seen in the code bellow, just copy and paste them to your desired location ( container )&nbsp;</p>\n<pre class=\"html\">\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-turqoise&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-green&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-blue&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-magenta&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-dark&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-yellow&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-red&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-orange&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;</pre>\n<h4>\n\tPNG Icon Lists</h4>\n<p>\tAltough we also incorporated font-awesome&nbsp;http://fortawesome.github.io/Font-Awesome/icons/ in our project, we included some PNG icons as well. To generate a icon list, you must first create an unsorted list ( ul ) with the class name icon-list, then, to the list you want, add any of the following classes. ( check the example bellow )&nbsp;</p>\n<pre class=\"html\">\n&lt;ul class=&quot;icon-list&quot;&gt;\n    &lt;li class=&quot;address-list&quot;&gt;Address icon&lt;/li&gt;\n    &lt;li class=&quot;block-list&quot;&gt;Block icon&lt;/li&gt;\n    &lt;li class=&quot;bookmark-list&quot;&gt;Bookmark icon&lt;/li&gt;\n    &lt;li class=&quot;briefcase-list&quot;&gt;Briefcase icon&lt;/li&gt;\n    &lt;li class=&quot;bubble-list&quot;&gt;Bubble icon&lt;/li&gt;\n    &lt;li class=&quot;buy-list&quot;&gt;Buy icon&lt;/li&gt;\n    &lt;li class=&quot;calendar-list&quot;&gt;Calendar icon&lt;/li&gt;\n    &lt;li class=&quot;clipboard-list&quot;&gt;Clipboard icon&lt;/li&gt;\n    &lt;li class=&quot;clock-list&quot;&gt;Clock icon&lt;/li&gt;\n    &lt;li class=&quot;delete-list&quot;&gt;Delete icon&lt;/li&gt;\n    &lt;li class=&quot;diagram-list&quot;&gt;Diagram icon&lt;/li&gt;\n    &lt;li class=&quot;document-list&quot;&gt;Document icon&lt;/li&gt;\n    &lt;li class=&quot;down-list&quot;&gt;Down icon&lt;/li&gt;\n    &lt;li class=&quot;flag-list&quot;&gt;Flag icon&lt;/li&gt;\n    &lt;li class=&quot;folder-list&quot;&gt;Folder icon&lt;/li&gt;\n    &lt;li class=&quot;gear-list&quot;&gt;Gear icon&lt;/li&gt;\n    &lt;li class=&quot;globe-list&quot;&gt;Globe icon&lt;/li&gt;\n    &lt;li class=&quot;heart-list&quot;&gt;Heart icon&lt;/li&gt;\n    &lt;li class=&quot;help-list&quot;&gt;Help icon&lt;/li&gt;\n    &lt;li class=&quot;info-list&quot;&gt;Info icon&lt;/li&gt;\n    &lt;li class=&quot;key-list&quot;&gt;Key icon&lt;/li&gt;              \n    &lt;li class=&quot;left-list&quot;&gt;Left icon&lt;/li&gt;\n    &lt;li class=&quot;letter-list&quot;&gt;Letter icon&lt;/li&gt;\n    &lt;li class=&quot;monitor-list&quot;&gt;Monitor icon&lt;/li&gt;\n    &lt;li class=&quot;pencil-list&quot;&gt;Pencil icon&lt;/li&gt;\n    &lt;li class=&quot;plus-list&quot;&gt;Plus icon&lt;/li&gt;\n    &lt;li class=&quot;present-list&quot;&gt;Present icon&lt;/li&gt;\n    &lt;li class=&quot;print-list&quot;&gt;Print icon&lt;/li&gt;\n    &lt;li class=&quot;right-list&quot;&gt;Right icon&lt;/li&gt;\n    &lt;li class=&quot;save-list&quot;&gt;Save icon&lt;/li&gt;\n    &lt;li class=&quot;search-list&quot;&gt;Search icon&lt;/li&gt;\n    &lt;li class=&quot;shield-list&quot;&gt;Shield icon&lt;/li&gt;\n    &lt;li class=&quot;statistics-list&quot;&gt;Statistics icon&lt;/li&gt;\n    &lt;li class=&quot;stop-list&quot;&gt;Stop icon&lt;/li&gt;\n    &lt;li class=&quot;tick-list&quot;&gt;Tick icon&lt;/li&gt;\n    &lt;li class=&quot;trash-list&quot;&gt;Trash icon&lt;/li&gt;\n    &lt;li class=&quot;up-list&quot;&gt;Up icon&lt;/li&gt;\n    &lt;li class=&quot;user-list&quot;&gt;User icon&lt;/li&gt;\n    &lt;li class=&quot;wallet-list&quot;&gt;Walet icon&lt;/li&gt;\n    &lt;li class=&quot;warning-list&quot;&gt;Warning icon&lt;/li&gt;\n    &lt;li class=&quot;home-list&quot;&gt;Home icon&lt;/li&gt;\n    &lt;li class=&quot;label-list&quot;&gt;Label icon&lt;/li&gt;  \n&lt;/ul&gt;</pre>\n<h4>\n\tNormal Lists, Numbered Lists</h4>\n<p>\tRegular lists are vital, and the code for them is very simple. To create an ordered list class name your class ( ol class ) number-list, to create a regular list, name your class (ul class) normal-list.</p>\n<h4>\n\tStatic Notifications</h4>\n<p>\tStatic notifications are just background colored boxes used to attract the attention of the viewer. To create these classes, add them to a container and use the examples bellow.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;div class=&quot;static-notification-red&quot;&gt;\n    &lt;p class=&quot;center-text uppercase&quot;&gt;Red notification!&lt;/p&gt;\n&lt;/div&gt;</pre>\n\t<div>\n\t\tYou can choose between four colors just by switching the main class name from static-notification-red to green, yellow or blue.&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<h4>\n\t\tTable&nbsp;</h4>\n\t<p>\t\tBy default, templates are responsive, but please keep in mind the reelestate of the screen you are adding the table to as you cannot add 50 columns to a 300 pixel width screen! Using tables implies the same old structure use since the begging of HTML, but just in case, we&#39;re adding the code here so you can copy and paste it to your page and edit from there on!&nbsp;</p>\n\t<pre class=\"html\">\n       &lt;table cellspacing=&#39;0&#39; class=&quot;table&quot;&gt;\n            &lt;tr&gt;\n                &lt;th&gt;TABLE&lt;/th&gt;\n                &lt;th class=&quot;table-title&quot;&gt;PLUS&lt;/th&gt;\n                &lt;th class=&quot;table-title&quot;&gt;PRO&lt;/th&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; ONE&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr class=&#39;even&#39;&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; TWO&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; THREE&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr class=&#39;even&#39;&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt;VALUE&lt;/td&gt;\n                &lt;td class=&quot;price&quot;&gt;$9.&lt;sup class=&quot;small-price&quot;&gt;99&lt;/sup&gt;&lt;/td&gt;\n                &lt;td class=&quot;price&quot;&gt;$109.&lt;sup class=&quot;small-price&quot;&gt;99&lt;/sup&gt;&lt;/td&gt;\n            &lt;/tr&gt;       \n        &lt;/table&gt;</pre>\n\t<p>\t\t&nbsp;</p>\n</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "jQuery Features","id": "jquery_features","content": "<h4>\n\tTabs</h4>\n<p>\tResponsive tabs are simple to use.</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;tabs&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;tab-but tab-but-1 tab-active&quot;&gt;Tab 1&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;tab-but tab-but-2&quot;&gt;Tab 2&lt;/a&gt;   \n    &lt;/div&gt;\n    &lt;div class=&quot;tab-content tab-content-1&quot;&gt;\n        Tab Content\n    &lt;/div&gt;\n    &lt;div class=&quot;tab-content tab-content-2&quot;&gt;\n        Tab Content\n    &lt;/div&gt;\n&lt;/div&gt;    </pre>\n<div>\n\tThe tabs class creates the tab controls buttons. To create more tab buttons duplicate line 4 and replace tab-but-2 with tab-but-3, and keep adding numbers growing with each new tab. &nbsp;Also, when creating a new tab button add the tab-content tab-content-3 and keep adding growin numbers to each as more elements you add.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\tSubmenus In Page</h4>\n<p>\tTo add more submenu items, duplicate the anchor classes.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;submenu-navigation&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;submenu-nav-deploy&quot;&gt;Deploy Submenu&lt;/a&gt;\n    &lt;div class=&quot;submenu-nav-items&quot;&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tToggles</h4>\n<p>\tYou can choose between 3 toggles, to switch between these toggles, replace toggle-1, deploy-toggle-1 with -2 and -3. For the toggle-3, be sure to add &nbsp;the following code inside the anchor. &lt;em&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/em&gt;&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;toggle-1&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;deploy-toggle-1&quot;&gt;This is content toggle&lt;/a&gt;\n        &lt;div class=&quot;toggle-content&quot;&gt;\n            Toggle Content Here\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tBig Notifications</h4>\n<p>\tBig notifications cna be used when a user must see a large notice and these can be closed as well. You can chose between 4 color codes red, green, yellow and blue. replace COLOR-notifcation with the color you want from the four above.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;big-notification red-notification&quot;&gt;\n    &lt;h4 class=&quot;uppercase&quot;&gt;Notification Title&lt;/h4&gt;\n    &lt;a href=&quot;#&quot; class=&quot;close-big-notification&quot;&gt;x&lt;/a&gt;\n    &lt;p&gt;A lot of nice stuff you want to write in this notification! It&#39;s simple to use and awesome!&lt;/p&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tStatic Dismisable Notifications</h4>\n<p>\tStatic small notifications can be dismissed with a simple tap. These work the same as the features from the typography page and can be switched between four color codes, green, blue, yellow or red. Replace static-notification-COLOR with the color you wish.</p>\n<pre class=\"html\">\n&lt;div class=&quot;static-notification-red tap-dismiss-notification&quot;&gt;\n    &lt;p class=&quot;center-text uppercase&quot;&gt;A red notification! Dismiss!&lt;/p&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t&nbsp;</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Other Features","id": "other_features","content": "<h4>\n\tSImple Buttons</h4>\n<p>\tNot much to be explained here, these are button classes, copy and paste them where you need them.&nbsp;</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-blue&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-magenta&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-tea&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-yellow&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-orange&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-light&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-grey&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button button-dark&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;Button&lt;/a&gt;           </pre>\n<h4>\n\t3D Button Classes</h4>\n<p>\t3D Buttons have a darker 4 pixel stroke beneeth them to give them a three dimensional effect. Just copy and paste them where you need them.</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-red red-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-green green-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-blue blue-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-magenta magenta-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-tea tea-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-yellow yellow-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-orange orange-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-light light-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-grey grey-3d&quot;&gt;Button&lt;/a&gt;    \n&lt;a href=&quot;#&quot; class=&quot;button-3d button-dark dark-3d&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button-3d button-red red-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-green green-3d&quot;&gt;Button&lt;/a&gt; </pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tFont Awesome Buttons</h4>\n<p>\tThe font awesome class (&nbsp;http://fortawesome.github.io/Font-Awesome/icons/ &nbsp;4.1.0 curent version ) allows you to import icons by simply adding the &lt;i class=&quot;fa fa-ICON-NAME&quot;&gt;&lt;/i&gt; to your button. Check the link to see all icons available. Make sure you copy and paste the icon name corectly. In case you see that an icon is not displayed, it means that font-awesome has updated their classes and you need to update the font-awesome.css file.&nbsp;</p>\n<p>\tWe won&#39;t be updating our files just for font-awesome.css because it would be a logistical nightmare to update all our 60+ files for just one CSS. Updating the class is extremely simple. Open&nbsp;http://fortawesome.github.io/Font-Awesome/ , download the pack, extract the file, (make a backup of font-awesome.css from our styles folder then ) replace font-awesome.css in our item, with the font-awesome.css you&#39;ve just downloaded! Voila! Font awsome has been updated!&nbsp;</p>\n<p>\tIn case this method does not work, revert to the old font-awesome you&#39;ve just backed up and send us a message. We will fix the issue in less than 24 hours and give you a free update!&nbsp;</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;&lt;i class=&quot;fa fa-navicon&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;&lt;i class=&quot;fa fa-life-saver&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-blue&quot;&gt;&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-magenta&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-tea&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-yellow&quot;&gt;&lt;i class=&quot;fa fa-picture-o&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-orange&quot;&gt;&lt;i class=&quot;fa fa-question&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-light&quot;&gt;&lt;i class=&quot;fa fa-exclamation&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-grey&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;         \n&lt;a href=&quot;#&quot; class=&quot;button button-dark&quot;&gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;  </pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tSpeach Bubbles</h4>\n<p>\tThe following code must be added in a container.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;em class=&quot;speach-left-title&quot;&gt;John Doe says:&lt;/em&gt;\n&lt;p class=&quot;speach-left&quot;&gt;This is just an awesome bubble! It&#39;s quite cute isn&#39;t it?&lt;/p&gt;\n\n&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n\n&lt;em class=&quot;speach-right-title&quot;&gt;Jane Doe replied:&lt;/em&gt;\n&lt;p class=&quot;speach-right blue-bubble&quot;&gt;Yeap! It&#39;s awesome isn&#39;t it and it&#39;s not that hard to use! And they act like bubbles, only expanding to 75% of width!&lt;/p&gt;\n\n&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;  </pre>\n\t<p>\t\tOnce you&#39;ve copied the code above, replace the text you need with yours. The top code will create a left speach bubble, the bottom code will create a right speach bubble. Copy and paste as many times as many bubbles you need.&nbsp;</p>\n\t<h4>\n\t\tDevice Specific Classes</h4>\n\t<p>\t\tDevice specific classes will apear only for the device that browse them. We&#39;ve added android, ipod, ipad, and iphones to the mix, because these represent 99% of the mobile marketshare. To change the device, simply replace the main class DEVICE-detected with android, ipod, iphone, or ipad.</p>\n\t<p>\t\tWe&#39;ve made a small design for you, but inside the DEVICE-detected class you can add whatever content you wish to display for that specific platform.&nbsp;</p>\n\t<pre class=\"html\">\n&lt;div class=&quot;android-detected&quot;&gt;\n    &lt;div class=&quot;detected-wrapper&quot;&gt;\n        &lt;img src=&quot;images/detector/android.png&quot; alt=&quot;img&quot;&gt;\n        &lt;h4&gt;Get it on Google Play&lt;/h4&gt;\n        &lt;em&gt;For your Android Device&lt;/em&gt;\n        &lt;p&gt;\n            This is a demo box, included in the template, but you can detect Androids\n            and add whatever text or element appear for that platform only!\n        &lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<p>\t&nbsp;</p>\n"},{"title": "Portfolios","id": "portfolios","content": "<h4>\n\tOne Item Portfolio</h4>\n<p>\tInside the content class, create a class called portfolio-one, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-one-item full-bottom&quot;&gt;\n    &lt;div class=&quot;portfolio-one-image&quot;&gt;\n        &lt;a href=&quot;images/pictures/3.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Here&quot;&gt;\n            &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;\n        &lt;/a&gt;\n        &lt;img src=&quot;images/pictures/3.jpg&quot; class=&quot;responsive-image&quot;&gt;\n    &lt;/div&gt;\n\n    &lt;div class=&quot;portfolio-one-text&quot;&gt;\n        &lt;h3 class=&quot;title&quot;&gt;Portfolio Item&lt;/h3&gt;\n        &lt;em class=&quot;subtitle&quot;&gt;Awesome one column portfolio&lt;/em&gt;\n        &lt;div class=&quot;portfolio-one-details&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;10 September 2055&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Mobile&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Envato Item&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;p class=&quot;half-bottom&quot;&gt;\n            Lorem ipsum dolor sit amet, consectetur est adipiscing elit. Pellentesque lacus ex,\n            sollid um facilisis elementum quis, vulputate nec urna. In scelerisque tincidunt \n            enim, eutsmax. \n        &lt;/p&gt;            \n        &lt;div class=&quot;portfolio-one-links&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt; Visit Project&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Details &lt;i class=&quot;fa fa-link&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;/div&gt; \n    &lt;/div&gt;       \n&lt;/div&gt;</pre>\n\t<div>\n\t\tLine 1 creates the hosing box for the portfolio item.&nbsp;</div>\n\t<div>\n\t\tLine 2 creates the portfolio one image wrapper.</div>\n\t<div>\n\t\tLine 3 4 5 6 creates the swipebox gallery wrapper, inside of this there is the plus icon.</div>\n\t<div>\n\t\tLines 9 to 26 house the portfolio title, subtitle, details, text and links. Replace them acording to your needs!&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<h4>\n\t\tTwo Item Portfolio</h4>\n\t<p>\t\tInside the content class, create a class called portfolio-two, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.&nbsp;</p>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-two-item full-bottom&quot;&gt;\n    &lt;div class=&quot;portfolio-two-image&quot;&gt;\n        &lt;a href=&quot;images/pictures/3.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Here&quot;&gt;\n            &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;\n        &lt;/a&gt;\n        &lt;img src=&quot;images/pictures/3s.jpg&quot; class=&quot;responsive-image&quot;&gt;\n    &lt;/div&gt;\n\n    &lt;div class=&quot;portfolio-two-text&quot;&gt;\n        &lt;h3 class=&quot;title&quot;&gt;Portfolio Item&lt;/h3&gt;\n        &lt;em class=&quot;subtitle&quot;&gt;Portfolio items placed on multiple columns.&lt;/em&gt;\n        &lt;p class=&quot;half-bottom&quot;&gt;\n            Lorem ipsum dolor sit amet, consecte tur est adipiscing elit. Lacus \n            sollid um facilisis eleme quis, vulputat nec. \n        &lt;/p&gt;            \n        &lt;div class=&quot;portfolio-two-links&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt; Visit Project&lt;/a&gt;\n        &lt;/div&gt; \n    &lt;/div&gt;       \n&lt;/div&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tThe second portfolio follows the same rules as the first one, same code manages it, only the way it reacts in responsive screen differes.&nbsp;</div>\n\t<h4>\n\t\tWide Portfolio</h4>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-wide&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;portfolio-wide-item&quot;&gt;\n   <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;h3&gt;Swing near the ocean&lt;/h3&gt;\n        &lt;p&gt;This is a wide item, just tap it to read more&lt;/p&gt;\n   <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n        &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/1ww.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;/a&gt;\n&lt;/div&gt;</pre>\n\t<p>\t\tTo make more wide items, duplicate the anchor class.</p>\n\t<p>\t\tLine 3 creates the wide portfolio title.</p>\n\t<p>\t\tLine 4 creates the wide portfolio text</p>\n\t<p>\t\tLine 5 creates the overlay for the image</p>\n\t<p>\t\tLine 6 creates the image itself.&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<h4>\n\t\tAdaptive Portfolio</h4>\n\t<p>\t\t&nbsp;</p>\n\t<pre class=\"html\">\n&lt;div class=&quot;adaptive-style&quot;&gt;\n    &lt;h4&gt;Portfolio&lt;/h4&gt;\n    &lt;a class=&quot;adaptive-three-activate&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-th&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;adaptive-two-activate&quot;   href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-th-large&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;adaptive-one-activate active-adaptive-style&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-navicon&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n\n&lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;\n\n&lt;div class=&quot;portfolio-adaptive adaptive-one&quot;&gt;\n    &lt;div class=&quot;adaptive-item&quot;&gt;\n        &lt;a href=&quot;images/pictures/1.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Goes Here&quot;&gt;\n            &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/1.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;/a&gt;\n        &lt;h4&gt;Item One&lt;/h4&gt;\n        &lt;p&gt;\n            Portfolio Text\n        &lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;adaptive-item&quot;&gt;\n        &lt;a href=&quot;images/pictures/2.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Goes Here&quot;&gt;\n            &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/2.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;/a&gt;\n        &lt;h4&gt;Item Two&lt;/h4&gt;\n        &lt;p&gt;\n           Portfolio Text        \n        &lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;adaptive-item&quot;&gt;\n        &lt;a href=&quot;images/pictures/3.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Goes Here&quot;&gt;\n            &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/3.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;/a&gt;\n        &lt;h4&gt;Item Three&lt;/h4&gt;\n        &lt;p&gt;\n           Portfolio Text\n        &lt;/p&gt;\n\n    &lt;/div&gt;\n\n&lt;/div&gt;</pre>\n\t<p>\t\tThe adaptive-style class houses the adaptive controls, to make any of them active, simply add the class active-adaptive-style.&nbsp;</p>\n\t<p>\t\tThe portfolio-adaptive class houses all the elements within it. To make an 1, 2, or 3 elements by default replace adaptive-one with adaptive-two or adaptive-three.&nbsp;</p>\n\t<p>\t\tThe adaptive-item houses an image, a h4 ( the title ) and a p ( paragraph ) the portfolio text. Replace as you need them.&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Galleries","id": "galleries","content": "<h4>\n\tRound and Square Thumbnail Gallery</h4>\n<pre class=\"html\">\n&lt;ul class=&quot;gallery round-thumb&quot;&gt;\n    &lt;li&gt;\n        &lt;a class=&quot;swipebox&quot; href=&quot;images/pictures/1.jpg&quot; title=&quot;An awesome gallery!&quot;&gt;\n            &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot; /&gt;\n        &lt;/a&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;</pre>\n<div>\n\tTo change the style of the gallery from round to square, relace the round-thumb with square thumb.</div>\n<div>\n\tTo add more images, simply duplicate the list class. The title of the anchor represents the image caption.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\tWide Gallery</h4>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio-wide&quot;&gt;\n    &lt;a href=&quot;images/pictures/1.jpg&quot; class=&quot;swipebox portfolio-wide-item&quot; titlte=&quot;caption here&quot;&gt;\n       <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>&lt;h3&gt;Swing near the ocean&lt;/h3&gt;\n        &lt;p&gt;This is a wide item, just tap it to read more&lt;/p&gt;\n       <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>&lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n        &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/1ww.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;/a&gt;\n&lt;/div&gt;</pre>\n<p>\tThe wide gallery is the exact same thing as a portfolio, only, it houses the swipebox class inside the main anchor.&nbsp;</p>\n"},{"title": "Pages","id": "pages","content": "<h4>\n\t404 Error Page</h4>\n<pre class=\"html\">\n&lt;div class=&quot;coverpage coverpage-bg3 coverpage-error&quot;&gt;\n    &lt;div class=&quot;coverpage-content&quot;&gt;\n    <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;h1&gt;404&lt;/h1&gt;\n            &lt;h4&gt;You&#39;re on the wrong page!&lt;/h4&gt;\n            &lt;p&gt;\n                We&#39;re either building this page now, and you&#39;re \n                here too soon, or the page doesn&#39;t exist! So\n                how about going back home?\n            &lt;/p&gt;\n            &lt;a class=&quot;coverpage-button&quot; href=&quot;#&quot;&gt;Homepage&lt;/a&gt;\n        &lt;/div&gt;\n    &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThis code generates the 404 page. It should be outside the content. We suggest not including a footer on these pages</p>\n<p>\tLine 1 creates the coverpaage, meaning, the 100% height of the page, this has the class coverpage-bg3 which is the background image. To edit and replace the background image, open framework.css and find (ctrl + f or cmd + f ) .coverpage-bg3, replace the image there with your own.&nbsp;</p>\n<p>\tLine 3 is the main title</p>\n<p>\tLine 4 is the small title</p>\n<p>\tLine 5 to 9 is the 404 page text</p>\n<p>\tLine 10 is the button to direct users back to a page you desire.&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tUnder Construction Page</h4>\n<pre class=\"html\">\n        &lt;div class=&quot;soon-page-wrapper&quot;&gt;\n            &lt;div class=&quot;soon-page&quot;&gt;\n                &lt;h1&gt;Coming Soon&lt;/h1&gt;\n                &lt;h4&gt;We&#39;re still working on this page!&lt;/h4&gt;\n                &lt;p&gt;\n                    We&#39;re working really hard to get this page up and running as soon as possible! We have an estimate below!                    \n                &lt;/p&gt;\n                &lt;div class=&quot;countdown&quot;&gt;&lt;/div&gt;\n                &lt;a href=&quot;#&quot; class=&quot;soon-button&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;\n            &lt;/div&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n        &lt;/div&gt;</pre>\n<div>\n\tThe same principle of placing the construction page applies as for the 404 page&nbsp;</div>\n<p>\tLine 3 is the main title</p>\n<p>\tline 4 is the main sub title</p>\n<p>\tline 5 is the text</p>\n<p>\tThe div class countdown is the countdown timer, you can open custom.js and locate the countdown code, it&#39;s on the top lines. Replace the date there with yours.</p>\n<p>\tLine 12 is the button to redirect users wherever you want them!&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tUpdates Page and PageApp Activity&nbsp;</h4>\n<p>\tThe following code creates a notification that uses a image for the icon. &nbsp;Replace the second line image with an image you desire.&nbsp;</p>\n<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;em&gt;\n        Site outage for update. More updates soon. Tap read more for further information.\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Read More&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;</pre>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe code bellow generates a notification that uses a font awesome icon. You can use any icon found in the font awesome pack. We added the background there for you just to replace with casual hex colors.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;i class=&quot;fa fa-facebook&quot; style=&quot;background-color:#3B5998;&quot;&gt;&lt;/i&gt;\n    &lt;em&gt;\n        We just launched a Facebook page, for news and updates, go ahead and like our page.\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Like our Page&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tColor notitifications can be used to have the default colors of basic notifications, so replacing the yellow-notification in the example bellow with blue-notification, green-notification or red-notification will change the icon background color. For icons, use anything you&#39;d like from the font awesome library!&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\t<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;i class=&quot;fa fa-warning yellow-notification&quot;&gt;&lt;/i&gt;\n    &lt;em&gt;\n        Important notifications here! Just a simple class, copy and paste it and you&#39;re ready!\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Follow on Twitter&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;  </pre>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t</div>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Calendar Page","id": "calendar_page","content": "<pre class=\"html\">\n&lt;div class=&quot;calendar-titles&quot;&gt;\n    &lt;a class=&quot;light-titles&quot; href=&quot;#&quot;&gt;S&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;M&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;T&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;W&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;T&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;F&lt;/a&gt;\n    &lt;a class=&quot;light-titles&quot; href=&quot;#&quot;&gt;S&lt;/a&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;decoration half-bottom&quot;&gt;&lt;/div&gt;\n\n&lt;div class=&quot;calendar-days&quot;&gt;\n    &lt;!-- &amp;nbsp adds a space for the single numbers, this way they can be centered in boxes --&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp1&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp2&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp3&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp4&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp5&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp6&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp7&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp8&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp9&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;10&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;11&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;12&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;13&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;14&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;15&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;16&lt;/a&gt;\n    &lt;a class=&quot;taken-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;17&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;18&lt;/a&gt;\n    &lt;a class=&quot;close-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;19&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;20&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;21&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;22&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;23&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;24&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;25&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;26&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;27&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;28&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;29&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;30&lt;/a&gt;\n    &lt;a class=&quot;clear-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;31&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp1&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp2&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp3&lt;/a&gt;\n    &lt;a class=&quot;light-day&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&amp;nbsp4&lt;/a&gt;\n&lt;/div&gt;\n</pre>\n<p>\tLines 1 to 9 are the calendar days, you can rearange these as you wish. Adding light-day class to any anchor will make it look grayer, maybe signify a date that is of no importance to you or a weekenda day.&nbsp;</p>\n<p>\tLines 13 to 50 are the calendar days. These are created by simply adding more anchor classes.&nbsp;</p>\n<p>\tclear-day is a day with no background circle around it.</p>\n<p>\tlight-day is a day that is made to look like the days of the week, a little less dark.&nbsp;</p>\n<p>\ttaken-day will create a green circle around the day&nbsp;</p>\n<p>\tclose-day will create a red circle around the day</p>\n<p>\t&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;calendar-hours&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;calendar-hour calendar-hour-taken&quot;&gt;\n        &lt;strong class=&quot;cal-from&quot;&gt;0:00 AM&lt;/strong&gt;\n        &lt;strong class=&quot;cal-to&quot;&gt;  9:00 AM&lt;/strong&gt;\n        &lt;h4&gt;Closing Hours&lt;/h4&gt;\n        &lt;em&gt;&lt;i class=&quot;fa fa-map-marker&quot;&gt;&lt;/i&gt;Melbourne Victoria&lt;/em&gt;\n    &lt;/a&gt;                   \n    &lt;a href=&quot;#&quot;  class=&quot;calendar-hour calendar-hour-clear&quot;&gt;\n        &lt;strong class=&quot;cal-time&quot;&gt;10:00 AM&lt;/strong&gt;\n        &lt;h4&gt; &lt;/h4&gt;\n        &lt;em&gt; &lt;/em&gt;\n    &lt;/a&gt;                                 \n    &lt;a href=&quot;#&quot;  class=&quot;calendar-hour calendar-hour-taken&quot;&gt;\n        &lt;strong class=&quot;cal-time&quot;&gt;11:00 PM&lt;/strong&gt;\n        &lt;h4&gt;Lunch&lt;/h4&gt;\n        &lt;em&gt;&lt;i class=&quot;fa fa-cutlery&quot;&gt;&lt;/i&gt;Restaurant, Miami Beach&lt;/em&gt;\n    &lt;/a&gt;                   \n&lt;/div&gt;</pre>\n<p>\tLine 1 creates the calendar housing box.&nbsp;</p>\n<p>\tLine 2 to 7 is the calendar event itself. This event has a cal-from and a cal-to class. These represent the time from and the time to event. &nbsp;You can change the title in line 5 and the icon and &quot;location&quot; in line 6. Hovering this will show up as red. The hover effect is determined b the calendar-hour-taken class.&nbsp;</p>\n<p>\tLine 8 to 12 is an empty date. This callendar will have nothing on it, hence, hovering it will show up as green, determined by the calendar-hour-clear class.&nbsp;</p>\n<p>\tLine 13 to 17 is a simple date, taking only one hour on the calendar. This has the class cal-time. This will also light up red on hover due to the same calendar-hour-taken class.&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Login / Signin ","id": "login_signin","content": "<h4>\n\tLogin Page</h4>\n<pre class=\"html\">\n&lt;div class=&quot;login-page bg1&quot;&gt;\n    &lt;div class=&quot;login-page-overlay&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;login-page-wrapper&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;login-logo&quot;&gt;&lt;/a&gt;\n        &lt;p&gt;\n            Please enter your login credentials bellow. \n        &lt;/p&gt;\n        &lt;input type=&quot;text&quot;     class=&quot;login-username&quot; value=&quot;username&quot;&gt;\n        &lt;input type=&quot;password&quot; class=&quot;login-password&quot; value=&quot;password&quot;&gt;\n        &lt;div class=&quot;one-half&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;Login&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;one-half last-column&quot;&gt;\n            &lt;a href=&quot;pageapp-signup.html&quot; class=&quot;button button-blue&quot;&gt;Signup&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n        &lt;a class=&quot;forgot&quot; href=&quot;#&quot;&gt;Forgot Password?&lt;/a&gt;\n    &lt;/div&gt;            \n&lt;/div&gt;</pre>\n<div>\n\tLine 1 is the login page contaienr</div>\n<div>\n\tLine 2 is the login page dark overlay</div>\n<div>\n\tLine 3 is the login page wrapper.</div>\n<div>\n\tLine 4 is the login-page logo. You can replace this logo by opening framework.css and using CTRL + F or CMD + F to locate login-logo. Replace the image there. The width and height + the backgrond-size need to be half the image size. This maintains retina / hidpi image.&nbsp;</div>\n<div>\n\tLine 5, 6, 7 is the text at the top.&nbsp;</div>\n<div>\n\tLine 8 is the username at the top.&nbsp;</div>\n<div>\n\tLine 9 &nbsp;is the password field.</div>\n<div>\n\tLine 10, 11, 12 is the login button.</div>\n<div>\n\tLine 13, 14, 15 is the signup button logo. This will redirect to the redirect page.&nbsp;</div>\n<div>\n\tLine 16 clears the flotation</div>\n<div>\n\tLine 17 is the forgot text under the box.&nbsp;</div>\n<div>\n\tLine 18 closes the wrapper</div>\n<div>\n\tLine 19 closes the container.</div>\n<div>\n\tTo change the background of the login page, open style.css and locate bg-1{ } and replace the image there with your required image.&nbsp;</div>\n<h4>\n\tSign In Page</h4>\n<pre class=\"html\">\n&lt;div class=&quot;signup-page bg2&quot;&gt;\n    &lt;div class=&quot;signup-page-overlay&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;signup-page-wrapper&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;signup-logo&quot;&gt;&lt;/a&gt;\n        &lt;p&gt;\n            Create an account bellow, it&#39;s really easy! \n        &lt;/p&gt;\n        &lt;input type=&quot;text&quot; class=&quot;signup-email&quot; value=&quot;Email&quot;&gt;\n        &lt;input type=&quot;text&quot; class=&quot;signup-password&quot; value=&quot;Password&quot;&gt;\n        &lt;div class=&quot;one-half&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;button button-green full-button&quot;&gt;Signup&lt;/a&gt;\n        &lt;/div&gt;                \n        &lt;div class=&quot;one-half last-column&quot;&gt;\n            &lt;a href=&quot;pageapp-login.html&quot; class=&quot;button button-blue full-button&quot;&gt;Login&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n        &lt;div class=&quot;or-button&quot;&gt;\n            &lt;em&gt;&lt;/em&gt;\n            &lt;strong&gt;or&lt;/strong&gt;\n            &lt;em&gt;&lt;/em&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;signup-socials&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;facebook&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;Signup with Facebook&lt;/a&gt;\n            &lt;a href=&quot;#&quot; class=&quot;twitter&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;Signup with Twitter&lt;/a&gt;\n            &lt;a href=&quot;#&quot; class=&quot;google&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;Signup with Google Plus&lt;/a&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;            \n&lt;/div&gt;</pre>\n<div>\n\tLine 1 opens the sign in page container</div>\n<div>\n\tLine 2 is the dark overlay on the page</div>\n<div>\n\tLine 3 is the signup wrapper.</div>\n<div>\n\tLine 4 is the signup logo. To change the sign up logo, open framework.css and use CTRL + F or CMD + F to locate signup-logo. Replace the image there and change the width and height and the background size with half the size of the logo to maintain retina.&nbsp;</div>\n<div>\n\tLine 5 6 7 is the text under the logo.&nbsp;</div>\n<div>\n\tLine 8 is the email input field.</div>\n<div>\n\tLine 9 is the password input field.</div>\n<div>\n\tLine 10 11 12 is the sign up button.</div>\n<div>\n\tLine 13 14 15 is the login button.&nbsp;</div>\n<div>\n\tLine 16 is the clear for the sign in and buttons&nbsp;</div>\n<div>\n\tLine 17 18 19 &nbsp;20 21 is the or button.</div>\n<div>\n\tLine 22 23 24 25 26 are the social button signup buttons&nbsp;</div>\n<div>\n\tLine 27 closes the signup wrapper</div>\n<div>\n\tLine 28 closes the container of the sign up page.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n"},{"title": "ShareBoxes","id": "shareboxes","content": "<h4>\n\tThree Icon ShareBox</h4>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;facebook-color share-button-regular&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;Share to Facebook&lt;/a&gt;\n\n&lt;div class=&quot;one-half&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;twitter-color share-button-regular no-bottom&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;Twitter&lt;/a&gt;\n&lt;/div&gt;\n&lt;div class=&quot;one-half last-column&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;google-color share-button-regular no-bottom&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;Google&lt;/a&gt;\n&lt;/div&gt;</pre>\n<p>\tLine 1 creates the facebook fullscreen icon.</p>\n<p>\tLine 2, 3, 4 creates the twitter button.</p>\n<p>\tLine 5, 6, 7 creates the google button.</p>\n<h4>\n\tRound Social / Square Icons</h4>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;h3&gt;Share Circles&lt;/h3&gt;\n    &lt;p&gt;Regular share circles, can be added under any container you wish, copy and paste.&lt;/p&gt;\n    &lt;a class=&quot;share-button-round facebook-color&quot;  href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-round twitter-color&quot;   href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-round google-color&quot;    href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-round pinterest-color&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-pinterest&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-round sms-color&quot;       href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-comment-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-round mail-color&quot;      href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;h3&gt;Share Squares&lt;/h3&gt;\n    &lt;p&gt;Regular share circles, can be added under any container you wish, copy and paste.&lt;/p&gt;\n    &lt;a class=&quot;share-button-square facebook-color&quot;   href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-square twitter-color&quot;    href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-square google-color&quot;     href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-square pinterest-color&quot;  href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-pinterest&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-square sms-color&quot;        href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-comment-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;a class=&quot;share-button-square mail-color&quot;       href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n&lt;/div&gt;  </pre>\n<p>\tCopy and paste the classes where you need them.&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tBottom pop-up sharebox&nbsp;</h4>\n<p>\tAdding the following class to any button on the page will deploy the bottom pop-up sharebox.&nbsp;</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;show-share-bottom&quot;&gt;Show Share Bottom Pop-up&lt;/a&gt;</pre>\n<p>\tThe following box should be added in the all-elements class. NOT inside any content / container class. This will make it be independed from the page when it&#39;s deployed from the bottom .</p>\n<pre class=\"html\">\n&lt;div class=&quot;share-bottom&quot;&gt;\n    &lt;h3&gt;Share&lt;/h3&gt;\n    &lt;div class=&quot;share-socials-bottom&quot;&gt;\n        &lt;a href=&quot;FACEBOOK_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-facebook facebook-color&quot;&gt;&lt;/i&gt;\n            Facebook\n        &lt;/a&gt;\n\n        &lt;a href=&quot;TWITTER_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-twitter twitter-color&quot;&gt;&lt;/i&gt;\n            Twitter\n        &lt;/a&gt;\n\n        &lt;a href=&quot;GOOGLE_PLUS_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-google-plus google-color&quot;&gt;&lt;/i&gt;\n            Google\n        &lt;/a&gt;\n\n        &lt;a href=&quot;PINTEREST_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-pinterest-p pinterest-color&quot;&gt;&lt;/i&gt;\n            Pinterest\n        &lt;/a&gt;\n\n        &lt;a href=&quot;SMS_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-comment-o sms-color&quot;&gt;&lt;/i&gt;\n            Text\n        &lt;/a&gt;\n\n        &lt;a href=&quot;MAIL_LINK&quot;&gt;\n            &lt;i class=&quot;fa fa-envelope-o mail-color&quot;&gt;&lt;/i&gt;\n            Email\n        &lt;/a&gt;\n\n    &lt;/div&gt;\n    &lt;a href=&quot;#&quot; class=&quot;close-share-bottom&quot;&gt;Close&lt;/a&gt;\n&lt;/div&gt;</pre>\n<p>\tTo generate share links use this page&nbsp;http://www.sharelinkgenerator.com/ Enter your text, link location and images to create any share link.</p>\n<p>\tFor email, when using the link above, simply leave the TO field empty.&nbsp;</p>\n<p>\tFor text messeges use the following href&nbsp;&lt;a href=&quot;sms:&quot;&gt; This will automatically open the SMS app.&nbsp;</p>\n<div class=\"alert alert-error\">\n\t<strong>Please note that SMS links can only open the SMS app! These limitations are done by the phone creators and NOT by us!&nbsp;</strong><strong>&nbsp;</strong></div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Toggles","id": "toggles","content": "<pre class=\"html\">\n&lt;div class=&quot;container switch-box&quot;&gt;\n    &lt;h4&gt;iOS Style 1&lt;/h4&gt;\n    &lt;a href=&quot;#&quot; class=&quot;switch switch-1 switch-1-on&quot;&gt;\n        &lt;!-- Bellow the explanation there are 3 styles available for this button --&gt; \n\n        &lt;!-- The switch-1 class can be replaced with switch-2 or switch-3 --&gt; \n    &lt;/a&gt;\n    &lt;em class=&quot;switch-box-subtitle&quot;&gt;\n        Text Under The Title.\n    &lt;/em&gt;\n    &lt;div class=&quot;switch-box-content&quot;&gt;\n        &lt;p class=&quot;no-bottom&quot;&gt;\n            Text that shows when toggling.\n        &lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\tLine 1 openes the switchbox&nbsp;</p>\n<p>\tLine 2 Is the title next to the switch</p>\n<p>\tLine 3, 4, 5, 6, 7 is the button that changes when tapping it. There are 3 styles available.&nbsp;</p>\n<p>\tLine 8 9 10 is the subtitle under the main tittle. This dissapears when typing the button.</p>\n<p>\tLine 11 12 13 14 15 is the content for the toggle.&nbsp;</p>\n<p>\tLine 16 closes the switchbox.&nbsp;</p>\n<h4>\n\tStyle 1 &nbsp;for switch-1 ( green round switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;em&gt;I&lt;/em&gt;\n&lt;span&gt;&lt;/span&gt;\n&lt;em&gt;0&lt;/em&gt;</pre>\n<p>\tCreates the I / O toggle button.&nbsp;</p>\n<h4>\n\tStyle 2 for switch-1 ( green round switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;em&gt;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;&lt;/em&gt;\n&lt;span&gt;&lt;/span&gt;\n&lt;em&gt;&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;&lt;/em&gt;</pre>\n<p>\tCreates the X and Tick toggle button.</p>\n<h4>\n\tStyle 3 for switch-1 ( green round switch )</h4>\n<pre class=\"html\">\n&lt;span&gt;&lt;/span&gt;</pre>\n<p>\tThis removes the icons and just leaves the default green / red toggle button.&nbsp;</p>\n<h4>\n\tStyle 1 for switch-2 ( gray square switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;span&gt;\n    &lt;em&gt;I&lt;br&gt;O&lt;/em&gt;\n&lt;/span&gt;</pre>\n<div>\n\tThis creates the I / O toggle button.</div>\n<h4>\n\tStyle 2 for switch-2 ( gray square switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;span&gt;\n    &lt;em&gt;&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;&lt;br&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/em&gt;\n&lt;/span&gt;</pre>\n<div>\n\tThis creates the plus and tick button</div>\n<h4>\n\tStyle 3 for switch-2 ( gray square switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;span&gt;&lt;/span&gt;</pre>\n<p>\tThis leaves the default grey green toggle button.&nbsp;</p>\n<h4>\n\tStyle 1 for switch-3 ( green quare switch )</h4>\n<pre class=\"html\">\n&lt;strong&gt;&lt;/strong&gt;\n&lt;span&gt;&lt;/span&gt;\n&lt;em&gt;I&lt;/em&gt;\n&lt;em&gt;O&lt;/em&gt;</pre>\n<p>\tThis creates the I/O toggle button.</p>\n<h4>\n\tStyle 2 for switch-3 ( green square switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;strong&gt;&lt;/strong&gt;\n&lt;span&gt;&lt;/span&gt;\n&lt;em&gt;+&lt;/em&gt;\n&lt;em&gt;-&lt;/em&gt;</pre>\n<p>\tThis creates the - / + toggle button.&nbsp;</p>\n<h4>\n\tStyle 3 for switch-4 ( green square switch )&nbsp;</h4>\n<pre class=\"html\">\n&lt;strong&gt;&lt;/strong&gt;\n&lt;span&gt;&lt;/span&gt;</pre>\n<p>\tThis leaves the default green red toggle button.</p>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n"},{"title": "Ending Words","id": "ending_words","content": "<p>\tThis documentation is made for the page features, but the first documentation will cover the navigation, header, changing logos and more details that are independent to each template.&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tWhere do I get hands on support?&nbsp;</h4>\n<p>\tThat&#39;s simple. Send us a message using this form -&gt; http://enableds.com/html-support/</p>\n<p>\t&nbsp;</p>\n<h4>\n\tPlease rate 5 stars!&nbsp;</h4>\n<p>\tIf there is something wrong with the file, we&#39;ll help you, if there are features ( and by features we don&#39;t mean things like creating a new social network for you that competes with facebook ) we&#39;ll most likely add that too, and usually for free! If there is anything we can do to help, we will, plus, you got a mobile app like interface template for 10$. A 5 star rating will not hurt you, and it will only take a minute to give, but it will help us more than you can imagine! So thnak you in advance for your purchase and your rating!&nbsp;</p>\n<p>\tLet us know if we can help you at&nbsp;http://enableds.com/html-support/</p>\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}